<template>
  <div class="wrap">
    <div class="header">
      <span class="iconfont icon-fanhui" @click="back()"></span>
      <div class="title">资讯频道</div>
    </div>
    <div class="main">
      <div
        class="con"
        v-for="item in news"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <dl>
          <dt>
            <img src="../../static/资讯.png" alt="" />
          </dt>
          <dd>
            <h3>
              {{ item.title }}
            </h3>
            <span>{{ item.date }}</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import { getNews } from "../../service/index";
import "../../static/iconfont/font_ed6w5zgn1gn/iconfont.css";
export default {
  data() {
    return {
      news: [],
    };
  },
  async onShow() {
    let res = await getNews();
    console.log(res.body);
    if (res.status == 200) {
      this.news = res.body;
    }
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/pages/news/detail?id=${id}`,
      });
    },
  },
};
</script>

<style lang='scss'>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 200rpx;
    background: linear-gradient(90deg, #0272f0, #36a2fe);
    display: flex;
    align-items: center;
    position: relative;
    top:0;
    position:sticky;
    span {
      position: absolute;
      left: 40rpx;
      top: 50%;
      transform: translate(0, -50%);
      color: #fff;
    }
    .title {
      width: 100%;
      text-align: center;
      color: #fff;
    }
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .con {
      width: 90%;
      dl {
        width: 100%;
        display: flex;
        justify-content: space-between;
        dt {
          width: 977rpx;
          height: 246rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          margin-left: 20rpx;
          h3 {
            font-weight: 900;
            font-size: 35rpx;
            margin-top: 18rpx;
          }
          span {
            font-size: 25rpx;
            color: #666666;
            margin-top: 38rpx;
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>